<template>
  <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="outerVisible" width="800px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
      <el-form-item prop="" label="推荐商品">
        <el-button type="primary" @click="openSelectGoods">选择商品</el-button>
        <el-table :data="goodsList" border style="width: 100%;margin-top: 20px">
          <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
              <el-popover placement="top-start" trigger="hover">
                <a :href="scope.row.cover" target="_blank" title="查看最大化图片">
                  <img :src="scope.row.cover" style="width: 300px;height: 300px"/>
                </a>
                <img slot="reference" :src="scope.row.cover" @click="$openImg(scope.row.cover)" style="width: 50px;height: 50px; cursor:pointer"/>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" prop="title"></el-table-column>
          <el-table-column align="center" label="所属店铺" prop="shop_name"></el-table-column>
          <el-table-column align="center" label="价格" prop="min_sale_price"></el-table-column>
          <el-table-column align="center" label="实际销量" prop="real_sale_num"></el-table-column>
          <el-table-column align="center" label="贡献值" prop="consumption_value"></el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="商品封面图：" prop="cover_imge_url">
        <Imglist :tip="tip" @updataImg="updataImgCover" :limit="1" :value="cover_imge_array"
                 :dialogVisible="imgDialogVisible" :zi='true'></Imglist>
        <p style="color: #cf0f0f">
          图片规则：图片尺寸最大300像素*300像素；
        </p>
      </el-form-item>

      <el-form-item label="商品小程序路径" >
        <el-input v-model="form.url" style="width: 370px;" :disabled="true"/>
      </el-form-item>
      <!--          1：一口价（只需要传入price，price2不传）-->
      <!--          2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传）-->
      <!--          3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）-->
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" style="width: 370px;" :disabled="isDisabled "/>
        <p style="color: #cf0f0f">
          商品名称，最长14个汉字
        </p>
      </el-form-item>
      <el-form-item label="价格类型" prop="price_type">
        <el-radio-group v-model="form.price_type">
          <el-radio :label="'1'" class="radio">一口价</el-radio>
          <el-radio :label="'2'" class="radio">价格区间</el-radio>
          <el-radio :label="'3'" class="radio">显示折扣价</el-radio>
        </el-radio-group>
        <p v-if="isDisabled " style="color: #cf0f0f">
          商品审核通过已入库，只能修改价格
        </p>
      </el-form-item>
      <el-col v-if="form.price_type == '1'" v-bind="grid">
        <el-form-item label="一口价" prop="price">
          <el-input v-model="form.price" style="width: 200px;"/>
        </el-form-item>
      </el-col>
      <el-col v-if="form.price_type == '2'" v-bind="grid">
        <el-form-item label="最低价格" prop="price">
          <el-input v-model="form.price" style="width: 200px;"/>
        </el-form-item>
      </el-col>
      <el-col v-if="form.price_type == '2'" v-bind="grid">
        <el-form-item label="最高价格" prop="price2">
          <el-input v-model="form.price2" style="width: 200px;"/>
        </el-form-item>
      </el-col>
      <el-col v-if="form.price_type == '3'" v-bind="grid">
        <el-form-item label="市场价" prop="price">
          <el-input v-model="form.price" style="width: 200px;"/>
        </el-form-item>
      </el-col>
      <el-col v-if="form.price_type == '3'" v-bind="grid">
        <el-form-item label="现价" prop="price2">
          <el-input v-model="form.price2" style="width: 200px;"/>
        </el-form-item>
      </el-col>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleCancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="handleCloseOrder" :disabled="isDisabled">确认</el-button>
    </div>

    <selectGoods ref="selectGoods" selectType="goods" :idList="idList" @selectGoods="handleSelectGoods"
                 @lookGoodsOrShopDetail="lookGoodsOrShopDetail" v-if="showGoodsShop"></selectGoods>
  </el-dialog>

</template>

<script>
  import wechatLiveApi from '@/api/wechatLive.js'
  import Imglist from './../../oss/oss-uploadImg'
  import selectGoods from './select-goods'

  export default {
    components: {
      Imglist,
      selectGoods
    },
    data () {
      return {
        loading: false,
        grid: {
          xl: 8,
          lg: 12,
          md: 12,
          sm: 24,
          xs: 24
        },
        crud: {},
        form: {
          goodsId: null,
          productId: null,
          coverImgeUrl: '',
          url: null,
          priceType: null,
          price: null,
          price2: null,
          name: null,
          thirdPartyTag: null,
          auditId: null,
          auditStatus: null
        },
        rules: {
          cover_imge_url: [
            { required: true, message: '商品图片不能为空', trigger: 'blur' }
          ],
          priceType: [
            { required: true, message: '价格类型不能为空', trigger: 'blur' }
          ],
          price: [{ required: true, message: '不能为空', trigger: 'blur' }],
          name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
        },
        isDisabled: false,
        outerVisible: false,
        imgDialogVisible: false,
        tip: '',
        cover_imge_array: [],
        goodsList: [],
        idList: [],
        showGoodsShop: false

      }
    },

    methods: {
      handleCancel () {
        this.outerVisible = false
      },
      open () {
        this.cover_imge_array = []
        this.outerVisible = true
        this.form = {
          goodsId: null,
          productId: null,
          coverImgeUrl: '',
          url: null,
          priceType: null,
          price: null,
          price2: null,
          name: null,
          thirdPartyTag: null,
          auditId: null,
          auditStatus: null
        }
      },
      // 上传图片时的回调
      updataImgCover (e) {
        this.form.cover_imge_url = e[0]
      },
      openSelectGoods () {
        this.showGoodsShop = true
        this.$nextTick(() => {
          this.$refs.selectGoods.open()
        })
      },
      lookGoodsOrShopDetail (arg) {

      },
      handleSelectGoods (selectList) {
        console.log(selectList)
        this.goodsList = []
        this.goodsList.push(selectList[0])
        this.idList = []
        this.idList.push(selectList[0].id)
        this.form.name = selectList[0].title
        this.form.product_id = selectList[0].id
        this.form.url = 'pages/product/goods/goods?id=' + selectList[0].id
      },
      handleCloseOrder () {
        console.log(this.form)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true
            wechatLiveApi.wechatLiveGoodsSave(this.form).then(res => {
              if (res && res.data.code === 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.outerVisible = false
                this.$emit('updataList', 1)
              }
            }).finally(() => {
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
</style>
